<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <section class="panel">
                <header class="panel-heading">
                    区域管理
                    <button type="button" class="btn btn-info pull-right"
                            onclick="oceanModal.openDefault('system/group/item')">新增区域
                    </button>
                </header>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-6">
                            <table class="table tree table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="group-list-body">
                                </tbody>
                            </table>
                        </div>
                        <div class="col-lg-6"></div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</section>
<script type="application/javascript" src="static/js/jquery.treegrid.min.js"></script>
<script type="application/javascript" src="static/js/jquery.treegrid.bootstrap2.js"></script>
<script type="text/template" id="group-list-template">
    <@ _.each(items, function (item) { @>
    <tr class="treegrid-<@= item.id @>">
        <td><@= item.name @></td>
        <td style="width: 100px;">
            <button class="btn btn-primary btn-xs"
                    onclick="oceanModal.openDefault('system/group/item?id=<@= item.id @>')">
                <i class="icon-pencil"></i>
            </button>
            <button class="btn btn-danger btn-xs" onclick="confirmDialog.drop('<@= item.id @>','<@= item.name @>', 'com.ocean.core.entity.Group')">
                <i class="icon-trash"></i>
            </button>
        </td>
    </tr>
    <@ _.each(item.groups, function (child) { @>
    <tr class="treegrid-<@= child.id @> treegrid-parent-<@= item.id @>">
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<@= child.name @></td>
        <td style="width: 100px;">
            <button class="btn btn-primary btn-xs"
                    onclick="oceanModal.openDefault('system/group/item?id=<@= child.id @>')">
                <i class="icon-pencil"></i>
            </button>
            <button class="btn btn-danger btn-xs" onclick="confirmDialog.drop('<@= child.id @>','<@= child.name @>', 'com.ocean.core.entity.Group')">
                <i class="icon-trash"></i>
            </button>
        </td>
    </tr>
    <@ }); @>
    <@ }); @>
</script>
<script type="application/javascript">
    var groupData;
    function load() {
        WaitingDialog.show();
        $.post("resources/group/list", {}, function (data) {
            WaitingDialog.dismiss();
            if (data == null) {
                return;
            }
            groupData = data;
            var tmpl = _.template($('#group-list-template').html());
            $('#group-list-body').html(tmpl({items: data}));
            $('.tree').treegrid({
                initialState: 'collapsed',
                expanderExpandedClass: 'icon-minus-sign',
                expanderCollapsedClass: 'icon-plus-sign'
            });
        });
    }
    load();
</script>